<template>
  <a-modal
    title="修改密码"
    :width="500"
    :visible="visible"
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-alert
      class="errorAlert"
      v-if="alertVisable"
      showIcon
      banner
      :message="message"
      type="error"
      closable
      @close="alertOnClose"
    />
    <a-form :form="form">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="原密码"
          >
            <a-input-password v-decorator="['oldAccountPasswd', {rules: [{ required: true, message: '请输入密码' }, { validator:this.passwdCheck.bind(this) }]}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="新密码"
          >
            <a-input-password v-decorator="['newAccountPasswd', {rules: [{ required: true, message: '请填写密码' }, { validator:this.passwdCheck.bind(this) }]}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="新密码确认"
          >
            <a-input-password v-decorator="['newAccountPasswdVer', {rules: [{ required: true, message: '请再输入一次密码' }, { validator:this.passwdCheck.bind(this) }]}]" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import { changeAccount } from '../account'

export default {
  name: 'AccountChangeModal',
  props: {
  },
  data () {
    return {
      // form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      message: '修改密码失败',
      account: {},
      confirmLoading: false,
      alertVisable: false,
      visible: false,
      huiwAppIds: [
        { appId: 'huiwcore', appInfo: '平台应用' }
      ],
      showpasswd: true
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
  },
  methods: {
    showModal (account) {
      this.account = account
      this.message = ''
      this.alertVisable = false
      this.visible = true
    },
    handleOk () {
      const _this = this
      // 触发表单验证
      let valiTrue = false // 填写是否正确
      const apn = this.form.getFieldValue('newAccountPasswd')
      const apnv = this.form.getFieldValue('newAccountPasswdVer')
      if (apn === apnv) {
        valiTrue = true
      } else {
        this.message = '两次密码输入不一致'
        this.alertVisable = true
      }
      _this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err && valiTrue) {
          console.log('form values', values)
          _this.confirmLoading = true
          const parameter = {
            sysSeq: this.account.sysSeq,
            pid: this.account.pid,
            appId: this.account.appId,
            accountId: this.account.accountId,
            oldAccountPasswd: values.oldAccountPasswd,
            newAccountPasswd: values.newAccountPasswd
          }
          new Promise((resolve) => {
            resolve(changeAccount(parameter, {}))
          }).then((res) => {
            if (res.code === 'C1') {
              _this.$message.success('保存成功')
              _this.handleCancel()
            } else {
              this.message = '重置密码失败,原因' + res.message
              _this.alertVisable = true
            }
            // Do something
            _this.confirmLoading = false
            // _this.$emit('ok')
          }).catch(() => {
            // Do something
          }).finally(() => {
            // Do something
          })
        }
      })
    },
    handleCancel () {
      this.$emit('close')
      this.visible = false
    },
    // 关闭提示
    alertOnClose () {
      this.alertVisable = false
    },
    // 密码长度校验
    passwdCheck (rule, value, callback) {
      if (value && value.length < 6) {
        callback(new Error('密码长度须大于6位'))
        return
      }
      callback()
    }
  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .errorAlert {
    margin-top: 8px;
  }
</style>
